<template>
  <div :class="$style.searchBox">
    <p>{{label}}：</p>
    <el-input
      type="text"
      :value="inputValue"
      @input="(value) => onChange(value)"
      @change="onBlur"
      :placeholder="placeholder"
      clearable
      @clear="clearSearch"
    ></el-input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    label:{
      type: String,
      default: '输入搜索'
    },
    onChange: {
      type: Function,
      default: () => {}
    },
    onClear: {
      type: Function,
      default: () => {}
    },
    onBlur: {
      type: Function,
      default: () => {}
    },
    placeholder: {
      type: String,
      default: "请输入关键词"
    }
  },
  computed: {
    inputValue() {
      return this.value;
    }
  },
  data() {
    return {
      // inputValue: ''
    };
  },
  methods: {
    clearSearch() {
      //   this.onChange('')
      this.onClear();
    }
  },
  created() {}
};
</script>
<style module lang='scss'>
.searchBox {
  display: flex;
  align-items: center;
  :global {
    .el-input__inner {
      height: 32px;
    }
    .el-input__icon{
      line-height: 32px;
    }
    p{
      font-size: 14px;
      color: #666666;
      align-items: center;
      margin-right: 20px;
    }
    .el-input{
      width: auto;
    }
  }
}
</style>
